import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import {useContext, useState} from 'react';
import {ThemeContext} from '../../../components/ThemeContextProvider';
export default function () {
  const {theme} = useContext(ThemeContext);
  const styles = StyleSheet.create({
    root: {
      width: '100%',
      height: 140,
      backgroundColor: theme.themeColor,
      padding: 10,
      borderRadius: 12
    },
    titleWrap: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    title: {
      fontSize: 20,
      flex: 1
    },
    tagSuccess: {
      width: 40,
      height: 20,
      borderRadius: 4,
      backgroundColor: theme.primaryColor,
      justifyContent: 'center',
      alignItems: 'center',
      flexShrink: 0
    },
    tagText: {
      fontSize: 12,
      color: theme.themeColor,
    },
    desc: {
      fontSize: 14,
      marginTop: 6,
    },
    time: {
      fontSize: 12,
      marginTop: 3,
    },
    bgYellow: {
      backgroundColor: '#f08e35',
    },
    bgRed: {
      backgroundColor: '#d5445b',
    },
    bgGreen: {
      backgroundColor: '#02c789',
    },
    bgBblack: {
      backgroundColor: '#565656',
    },
    bgGrey: {
      backgroundColor: '#cccccc',
    },
    btnSize: {
      width: 120,
      height: 32,
      borderRadius: 8,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 14,
      marginLeft: 16
    },
    btnText: {
      fontSize: 14,
      color: theme.themeColor,
    },
  });
  return (
    <View style={styles.root}>
      <View style={styles.titleWrap}>
        <Text style={styles.title} numberOfLines={1}>T101</Text>
        <View style={styles.tagSuccess}>
          <Text style={styles.tagText}>堂食</Text>
        </View>
      </View>
      <Text style={styles.desc} numberOfLines={1}>待制作</Text>
      <Text style={styles.time}>2024-12-05 15:05:21</Text>
      <TouchableOpacity
        activeOpacity={0.7}
        style={[styles.bgYellow, styles.btnSize]}
        onPress={()=>{
            console.log('接单')
        }}>
        <Text style={styles.btnText}>接单</Text>
      </TouchableOpacity>
    </View>
  );
}
